import React from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

export interface SearchBarProps {
    onChangeText: (text: string) => void;
}

export default class SearchBar extends React.Component<any, any> {
    state = {
        value: '',
    };

    handleChangeText = (text: string) => {
        this.setState({ value: text }, () => {
            if  (this.props.onChangeText) {
                this.props.onChangeText(text);
            }
        });
    };
    
    render() {
        return (
            <View style={styles.searchBar}>
                <FontAwesome name="search" size={20} color="#888" style={{ marginLeft: 8 , paddingLeft: 8}} />
                <TextInput
                    style={styles.input}
                    placeholder="搜索设备"
                    placeholderTextColor={'#888'}
                    value={this.state.value}
                    onChangeText={this.handleChangeText}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    searchBar: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#e6f0fa',
        borderRadius: 20,
        height: 40,
        width: 330,
        margin: 16,
    },
    input: {
        flex: 1,
        marginLeft: 8,
        fontSize: 16,
        outlineWidth: 0,
        borderWidth: 0,
        backgroundColor: 'transparent',
    },
});

